import React from "react";

import { BASE_URL } from "../../utils/url";

import styles from './index.module.css'

export default function HouseItem({ house, style, onClick, editable, onEdit, onDelete}) {
  return (
    <div style={style} className={styles.house}>
      <div className={styles.body} onClick={() => onClick(house)}>
        <div className={styles.imgBox}>
          <img className={styles.img} src={`${BASE_URL}${house.houseImg}`} alt="" />
        </div>
        <div className={styles.info}>
          <h2 className={styles.h2}>{house.title}</h2>
          <h4 className={styles.h4}>{house.desc}</h4>
          <div className={styles.tagBox}>
            {
              house.tags.map((tag, id) => {
                let tagId = 'tag' + (id + 1)%3
                return (
                  <span className={[styles.tag, styles[tagId]].join(' ')} key={tag}>{tag}</span>
                )
              })
            }
          </div>
          <div>
            <span className={styles.price}>{house.price}</span><span>元/月</span>
          </div>
        </div>
      </div>
      {
        editable ? <div className={styles.edit}>
          <div className={styles.editBtn} onClick={() => {onEdit(house)}}>
            编辑
          </div>
          <div className={styles.delBtn} onClick={() => {onDelete(house)}}>删除</div>
        </div> : null
      }
    </div>    
  )
}